<template>
  <div class="nav-box">
    <ul class="nav">

  <!-- a标签需要手动去配置哈希值  -->
    <!--
      <li>
        <a href="#home">home</a>
      </li>
      <li>
        <a href="#document">document</a>
      </li>
      <li>
        <a href="#about">about</a>
      </li>
    -->

  <!--
    router-link原理：
    默认生成a标签进行跳转，不会刷新页面，会自动配置哈希值和
    当我们选择的是hash模式的时候会自动加上#去配置hash，不需
    要我们手动去配置hash会阻止a标签的默认行为
  -->

    <!--<li>
      <router-link to="/home">home</router-link>
    </li>

    <li>
      <router-link to="/document">document</router-link>
    </li>

    <li>
      <router-link to="/about">about</router-link>
    </li>-->

  <!--
    router-link各项配置

    1.把地址放在data中，动态绑定

    2.把地址放在一个对象中，动态绑定

    3.改变默认标签类型  tag   tag="div"

    4.把li作为跳转标签

    5.修改默认的router-link-active来自定义选中的样式

        1）通过Router选项对象下的linkActiveClass属性来进行全局修改

        2）通过行间active-class属性来进行局部修改

    6.当我们想要通过其他方式来实现组件间的切换时，可以在router-link中添加event属性来修改默认事件

    7.使用exact实现精确匹配，不包含根路径
  -->

    <!-- <router-link to="/home" tag="li"  event="mouseover">
      <i class="fa fa-home"></i>
      <span>home</span>
    </router-link>

    <li>
      <router-link :to="{ path:'/document' }" active-class="activeClass" event="mouseover">document</router-link>
    </li>

    <li>
      <router-link :to="about" tag="div" event="mouseover">about</router-link>
    </li>

    <li>
      <router-link to="user" tag="div" event="mouseover">user</router-link>
    </li> -->

  <!--
    当我们配置了根路径'/'对应的component为home，切换组件的时候会发现home标签还是选中状态，因为默认路由匹配是全包含的，'/about'也包含了根路径'/',
    我们可以通过exact属性实现精确匹配，不包含根路径进去
  -->
    <router-link to="/" exact tag="li"  event="mouseover">
      <i class="fa fa-home"></i>
      <span>home</span>
    </router-link>

    <li>
      <router-link :to="{ path:'/document' }" active-class="activeClass" event="mouseover">document</router-link>
    </li>

    <li>
      <router-link :to="about" tag="div" event="mouseover">about</router-link>
    </li>

    <!-- 这个地方不要使用user组件的命名路由，否则会导致错误 -->
    <li>
      <router-link :to="{ path:'/user' }" tag="div" event="mouseover">user</router-link>
    </li>

    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      about:'/about'
    }
  },
}
</script>

<style>
</style>
